<template>
    <view class="edit-tags-wrapper">
        <view class="tags-content">
            <view class="tags-box">
                <view class="uni-tag"
                    @click="handleOpen(item, index)"
                    v-for="(item, index) in tagsArray"
                    :key="index" >
                    {{item}}
                </view>
            </view>
            <!-- 增加按钮 -->
            <view class="add-btn" @click="handleOpen('', -1)" v-if="tagsArray.length < 4">
                <uni-icons type="plus" color="#fff" size="24"></uni-icons>
            </view>
        </view>
        <uni-popup ref="inputDialog" type="dialog">
            <view class="dialog-content">
                <view class="dialog-input">
                    <input class="uni-input"  focus v-model="editValue" placeholder="输入检索关键词" />
                </view>
                <view class="tips">关键词推荐：银行类型（例:邮政储蓄）,地域名称（例:杭州）等，最多5个汉字。</view>
                <view class="dialog-footer">
                    <view class="button b-delete" @click="handleSubmit('-1')">删除</view>
                    <view class="button b-cancle" @click="close">取消</view>
                    <view class="button b-confirm" @click="handleSubmit">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    export default {
        name:"editTags",
        props: {
          params: {
              type: Array,
              default: ()=> {
                  return []
              }
          }  
        },
        mounted() {
            this.tagsArray = this.params
        },
        data() {
            return {
                tagsArray: [],
                editValue: '',
                editIdx: 0,
                valid: true
            }  
        },
        methods: {
            handleOpen(val, index) {
                this.$refs.inputDialog.open()
                this.editValue = val
                this.editIdx = index > -1 ? index:this.tagsArray.length
            },
            handleSubmit(key) {
                if(key == -1) { this.editValue = '' };
                this.change()
                this.close()
            },
            change() {
                if(this.editValue == '') {
                    this.tagsArray.splice(this.editIdx, 1)
                }
                else {
                    this.tagsArray[this.editIdx] = this.editValue
                }
                //触发数据改变事件
                this.$emit('change', this.tagsArray)
            },
            close(){
                this.$refs.inputDialog.close()
            }
        },
        watch: {
            editValue(newVal) {
                //控制输入5个字符以内，去掉空格
                if(newVal.length > 5 || /\s/g.test(newVal)) {
                    this.$nextTick(() => {
                        this.editValue = newVal.substr(0,5).replace(/\s*/g, '')
                    })
                }
            },
            params(newVal) {
                this.tagsArray = newVal
            }
        }
    }
</script>

<style lang="scss">
    .edit-tags-wrapper{
        overflow-x: auto;
        .tags-content{
            padding: 8rpx 0;
            display: flex;
            .tags-box{
                height: 58rpx;
                display: flex;
                flex-wrap: nowrap;
                .uni-tag{
                    margin-right: 12rpx;
                    height: 52rpx;
                    line-height: 52rpx;
                    color: #2979ff;
                    white-space: nowrap;
                    border: 2rpx solid #2979ff;
                    border-radius: 3px;
                    display: inline-block;
                    font-size: 24rpx;
                    padding: 0 12rpx;
                }
            }
            .add-btn{
                background-color: $uni-color-primary;
                padding: 2rpx 6rpx;
                border-radius: 12rpx;
                vertical-align: -4rpx;
            }
            
        }
        .dialog-content{
            background-color: #fff;
            width: 520rpx;
            border-radius: 10rpx;
            padding: 32rpx 0 0;
            .dialog-title{
                font-size: 28rpx;
                color: #969696;
                text-align: center;
            }
            .dialog-input{
                margin: 36rpx auto 12rpx;
                width: 360rpx;
                .uni-input{
                    border: 2rpx solid #e4e4e4;
                    padding: 16rpx;
                    border-radius: 8rpx;
                    font-size: 28rpx;
                    text-align: center;
                }
            }
            .tips{
                font-size: 24rpx;
                width: 90%;
                margin: auto;
                color: #969696;
                margin-top: 20rpx;
                margin-bottom: 20rpx;
                text-align: center;
            }
            .dialog-footer{
                display: flex;
                flex-direction: row;
                font-size: 26rpx;
                text-align: center;
                border-top: 2rpx solid #e4e4e4;
                .button{
                    flex: 1;
                    padding: 20rpx 0;
                }
                .b-cancle{
                    color: $uni-text-color-grey;
                    border-right: 2rpx solid #e4e4e4;
                }
                .b-delete{
                    color: $uni-color-error;
                    border-right: 2rpx solid #e4e4e4;
                }
                .b-confirm{
                    color: $uni-color-primary;
                }
            }
        }
    }
</style>